<!--创建日期：2023年3月9日-->
<!--姓名：hk-->
<!--功能：出租车时空轨迹查询-->

<template>
  <div id="Taxi3dTrace" style="height:100%;width:100%;">
    <div id="Taxi3dTrace_Map" class="container"></div>
    <div id='Taxi3dTrace_taxiQuery'>
      <div class="title">时空轨迹查询</div>
      &nbsp&nbsp&nbsp
      <!--以下代码的作用没有得到体现，因为数据都是写死的-->
      <div id="step1">
        <el-cascader
                ref="getSelectData"
                placeholder="试试搜索数据名称"
                v-model="dataValue"
                size="mini"
                :options="options"
                @change="handleSelectChange"
                filterable>
        </el-cascader>
      </div>
      <input class="btus01" type="button" @click="Taxi3dTrace_addTrace" value="查询"/>
      <input class="btus02" type="button" @click="Taxi3dTrace_removeTrace" value="清空"/><br><br>
      <div id='Taxi3dTrace_imageInfo'>
        <img class="tuli" align="middle" src="../../assets/image/TaxiAnalysis/Taxi3dTrace_zaike.png">
        <img class="tuli" align="middle" src="../../assets/image/TaxiAnalysis/Taxi3dTrace_zhuche.png">
        <img class="tuli" align="middle" src="../../assets/image/TaxiAnalysis/Taxi3dTrace_qita.png">
        <img class="tuli" align="middle" src="../../assets/image/TaxiAnalysis/Taxi3dTrace_xiache.png">
        <img class="tuli" align="middle" src="../../assets/image/TaxiAnalysis/Taxi3dTrace_kongzai.png"><br>
      </div>
      <div id="Taxi3dTrace_text">
        <span class="span01">下车</span>
        <span class="span01">空载</span>
        <span class="span01">驻车</span>
        <span class="span01">乘客</span>
        <span class="span01">其他</span>
      </div>
    </div>
  </div>
</template>

<script>

  import 'maptalks/dist/maptalks.css';
  //maptalks 是一个3D（2.5D）得GIS地图引擎，支持基础得WebGL功能
  //对应的API文档链接： https://maptalks.org/maptalks.js/api/1.x/VectorLayer.html
  import * as maptalks from "maptalks";
  import {msg1} from "@/assets/js/TaxiAnalysis/TraceData2";

  export default {
    name: "Taxi_3dTrace",
    data() {
      return {
        //数据在下拉框
        dataValue: [],
        // options: this.$store.state.data,
        // options: this.$store.state.dataLineTrace[0].children,
        options: this.$store.state.dataLineTrace,
        value: '',
        DataAll: [],

        //  将之前的src/assets/js/TaxiAnalysis/map.js 中定义的变量全部定义到data当中
        //  用于接收新的图层
        Taxi3dTrace_rem: null,
        //需要后端传值  经度
        Taxi3dTrace_arrLat:[],
        //需要后端传值  维度
        Taxi3dTrace_arrLng:[],
        //需要后端传值  高度，用时间*0.1来表示高度
        Taxi3dTrace_arrHeight:[],
        //需要后端传值  出租车状态
        Taxi3dTrace_arrStatus:[],
        //需要后端传值   计时器
        Taxi3dTrace_timePiece: null,
        //初始时间
        times:0,
        map: null,
        //traceDataLenght : msg1.length
      }

    },
    beforeCreate() {
      // this.$store.commit('loadMenuDataLineTrace')
      this.$store.commit('loadMenuDataLineTrace')
    },
    // created() {
    //   this.$store.commit('loadMenuDataLineTrace')
    // },
    mounted() {
      // //获取数据在前
      // this.request.get("/traceData/clickTrace").then(res => {
      //       this.DataAll = res.data;
      //       if (this.DataAll.length === 0) {
      //         this.$message.error("目前数据为空，请您上传相关数据！")
      //       } else {
      //
      //       }
      //       //初始化原始数据
      //       for (let i = 0; i < this.DataAll.length; i++) {
      //         this.Taxi3dTrace_arrLat.push(this.DataAll[i].lat);
      //         this.Taxi3dTrace_arrLng.push(this.DataAll[i].lng);
      //         this.Taxi3dTrace_arrHeight.push(this.DataAll[i].time * 0.1);
      //         this.Taxi3dTrace_arrStatus.push(this.DataAll[i].status);
      //       }
      //     }
      // )
      //地图初始化
      this.mapShow()
      //this.Taxi3dTrace_addTrace()
    },
    methods: {
      //下拉框触发的事件
      handleSelectChange(val){
        //显示加载数据等待框
        this.shopShow = true;
        this.isDisabled = true;
        let that = this;
        let downSelectData = this.$refs.getSelectData.getCheckedNodes()
        this.downSelectData = downSelectData[0].data.value
        console.log(this.downSelectData,'获取下拉节点的值');
        //通过下拉框的值来获取对应的服务器数据
        this.request.get("/traceData/clickTrace",
                {
                  params:{
                    downSelectData: this.downSelectData,
                  }
                },
        ).then(res => {
          //初始状态先清空数据
          this.DataAll = [];
          this.Taxi3dTrace_arrLat =[];
          this.Taxi3dTrace_arrLng =[];
          this.Taxi3dTrace_arrHeight = [];
          this.Taxi3dTrace_arrStatus = []
          //开始组装数据，组装成geojson格式的数据
          this.DataAll = res.data;
          if (this.DataAll.length === 0) {
            this.$message.error("目前数据为空，请您上传相关数据！")
          }
          //初始化原始数据
          for (let i = 0; i < this.DataAll.length; i++) {
            this.Taxi3dTrace_arrLat.push(this.DataAll[i].lat);
            this.Taxi3dTrace_arrLng.push(this.DataAll[i].lng);
            this.Taxi3dTrace_arrHeight.push(this.DataAll[i].time * 0.1);
            this.Taxi3dTrace_arrStatus.push(this.DataAll[i].status);
          }
          console.log(this.DataAll,"初始数据加载完毕！")
          that.shopShow = !that.shopShow;
          that.isDisabled = !that.isDisabled;
        })
      },

      //展示maptalks地图
      mapShow() {
        //地图容器
        this.map = new maptalks.Map('Taxi3dTrace_Map', {
          center: [116.409686, 39.99999999],
          zoom: 11,
          pitch: 56, //俯视角
          bearing: 30,  // 旋转角
          dragRotatePitch: true,
          baseLayer: new maptalks.TileLayer('base', {
            urlTemplate:'https://api.mapbox.com/styles/v1/litaizeng/ckm398gud9bmz17rykd0lemst/tiles/256/' +
                    '{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibGl0YWl6ZW5nIiwiYSI6ImNrbHhycTZyNzEza2IydnBsbmo3dHh' +
                    '0Z3UifQ.q8qjMrqztI3hgqcyxolfMQ',
            subdomains: ['a','b','c','d'],
            attribution: false
            // 电子地图图层
            // urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            // subdomains: ['a', 'b', 'c', 'd'],
            // attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'

          }),
        });

      },

      //清除图层
      Taxi3dTrace_removeTrace() {
        //时间设置为初始的0
        this.times = 0;
        //clearInterval()函数是在JavaScript中用于取消setInterval()函数设定的定时执行操作，该函数没有返回值
        //清除计时器
        clearInterval(this.Taxi3dTrace_timePiece);
        this.map.removeLayer(this.Taxi3dTrace_rem);
      },

      //查询按钮
      Taxi3dTrace_addTrace() {
        //先清除当前图层的样式
        this.Taxi3dTrace_removeTrace();
        //给不同字段的数据绘制不同的颜色
        function Taxi3dTrace_arrColor(status) {
          if (status == 0) {
            let color = status;
            return color = "#ffc56e";
          }
          ;
          if (status == 1) {
            let color = status;
            return color = "#0092bc";
          }
          ;
          if (status == 2) {
            let color = status;
            return color = "#d0006f";
          }
          ;
          if (status == 3) {
            let color = status;
            return color = "Purple";
          }
          ;
          if (status == 4) {
            let color = status;
            return color = "#e6e6e6";
          }
          ;
        };

        //VectorLayer-----A layer for managing and rendering geometries
        //new VectorLayer(id, geometries, options)
        //enableAltitude : true------是否启用用高度渲染几何图形，默认为false
        this.Taxi3dTrace_rem = new maptalks.VectorLayer('vector',
                {
                  enableAltitude: true
                }).addTo(this.map);

        //addlayer event, fired when adding layers.
        this.map.addLayer(this.Taxi3dTrace_rem);

        //因为在定时器里面，this指向的是windows变量，不能再用之前的this.data读取数据，所以在定期器外面，先定一个that变量来接收之前的this（很关键，不然读取data中定义的变量）
        let that = this
        //由setInterval返回的ID值可用作clearInterval方法的参数
        //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
        this.Taxi3dTrace_timePiece = setInterval(function () {
          //定义空数组来接收 经度和维度  Taxi3dTrace_arrLng[this.times] ？
          let ArrayPoints = [];
          //parseFloat() 函数解析字符串并返回浮点数
          ArrayPoints.push([parseFloat(that.Taxi3dTrace_arrLng[that.times]), parseFloat(that.Taxi3dTrace_arrLat[that.times])]);
          //添加下一个数据点，是为了不让线产生断点。如果不清楚就注释掉下面这行代码跑一次
          ArrayPoints.push([parseFloat(that.Taxi3dTrace_arrLng[that.times + 1]), parseFloat(that.Taxi3dTrace_arrLat[that.times + 1])]);

          let ArrayHeights = [];
          //高度也是同理，需要添加下一个字段，防止线段产生断点
          ArrayHeights.push(parseFloat(that.Taxi3dTrace_arrHeight[that.times]), parseFloat(that.Taxi3dTrace_arrHeight[that.times + 1]));


          //代表一个LineString类型的Geometry。
          //new LineString(coordinates, options)
          new maptalks.LineString(ArrayPoints, {
            'properties': {
              'altitude': ArrayHeights,
            },
            'symbol': {
              'lineColor': Taxi3dTrace_arrColor(that.Taxi3dTrace_arrStatus[that.times]),
              'lineWidth': 2.5,
              'textPlacement': 'vertex'
            },

          }).addTo(that.Taxi3dTrace_rem);
          that.times += 1;
          if (that.times > that.DataAll.length - 1) {
            clearInterval(that.Taxi3dTrace_timePiece);
          } //清除循环
        }, 30);//计时器时间间隔

      },
    },
    beforeDestroy() {
      this.$store.commit('refresh')
    }

  }
</script>

<style scoped>

  #Taxi3dTrace {
    position: relative;
    width: 100%;
    height: 100%
  }

  .container {
    width: 100%;
    height: 100%
  }

  .el-select shuru el-select--mini {
    position: absolute;
    left: 6%;
    top: 28%;
    padding-left: 5%;
    width: 42%;
  }

  .shuru {
    position: absolute;
    top: 35%;
    left: 8%;
    width: 148px;
    background-color: black;
    color: white;
  }

  #Taxi3dTrace_taxiQuery {
    position: absolute;
    top: 20px;
    left: 12px;
    width: 23%;
    height: 30%;
    z-index: 100;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url("../../assets/image/public_resource/border_new1.png");
    background-size: 100% 100%;
    overflow: auto;
  }

  .title {
    position: absolute;
    left: 26%;
    margin-top: 10%;
    color: orange;
    font-size: 23px;
    font-family: '微软雅黑 Regular';
  }

  .btus01 {
    position: absolute;
    left: 54%;
    top: 33%;
    width: 56px;
    height: 29px;
    text-align: center;
    font-size: 15px;
    border-radius: 6px;
    margin-left: 29px;
  }

  .btus02 {
    position: absolute;
    left: 71%;
    top: 33%;
    width: 56px;
    height: 29px;
    text-align: center;
    font-size: 15px;
    border-radius: 6px;
    margin-left: 28px;
  }

  #Taxi3dTrace_taxiID {
    position: absolute;
    top: 36%;
    left: 11%;
    width: 145px;
    height: 35px;
    background-color: black;
    color: white;
    border-radius: 6px;
    background-color: #19344bb3;
  }

  #Taxi3dTrace_imageInfo {
    position: absolute;
    top: 54%;
    left: 5%;
  }

  #Taxi3dTrace_text {
    position: absolute;
    top: 68%;
    margin-left: 9%;
    margin-top: 1px;
    font-size: 16px;
  }

  .tuli {
    width: 25px;
    height: 25px;
    margin-left: 30px;
  }

  .span01 {
    font-size: 15px;
    font-weight: 500;
    margin-right: 11px;
    margin-left: 13px;
  }
  #step1{
    position: absolute;
    top: 83px;
    left: -15px;
    margin-left: 28px;
  }


</style>
